<template>
  <div class="singer-mv">
    <SingerMvNavBar @changeActive="changeActive" />

    <DynamicComponent :is="component_name" />
  </div>
</template>

<script>
import SingerMvNavBar from "@/components/nav/SingerMvNavBar.vue";

import MvAndVideo from "@/components/DynamicComponent/page_video/MvAndVideo.vue";
import Mv from "@/components/DynamicComponent/page_video/Mv.vue";
import Video from "@/components/DynamicComponent/page_video/Video.vue";
export default {
  components: {
    SingerMvNavBar,
    MvAndVideo,
    Mv,
    Video,
  },
  data() {
    return {
      active: 0,
      component_name: "MvAndVideo",
    };
  },

  watch: {
    // 切换动态组件
    active(n) {
      switch (n) {
        case 0:
          this.component_name = "MvAndVideo";
          break;
        case 1:
          this.component_name = "Mv";
          break;
        case 2:
          this.component_name = "Video";
          break;
      }
    },
  },

  methods: {
    // active变化时触发
    changeActive(index) {
      this.active = index;
    },
  },
};
</script>

<style lang="less" scoped></style>
